<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>AIC</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/icons-extra.css" />
		<link rel="stylesheet" href="../css/common.css" />
	</head>

	<body>

		<style>
			[v-cloak] {
				display: none;
			}
			
			html,
			body {
				height: 100%;
				background-color: white;
			}
			
			.mui-content,
			.mui-slider,
			.mui-slider-group {
				height: 100%;
			}
			
			.mui-control-content {
				background-color: white;
				min-height: 500px;
			}
			
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			
			.mui-table-view {
				padding-bottom: 39px;
			}
			
			.mui-table-view-cell {
				padding: 0px 0px;
			}
			
			.mui-table-view-cell:after {
				background-color: #ffffff;
			}
			
			.mui-table-view:after {
				background-color: #ffffff;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				color: #27CDDB;
				border-bottom: 2px solid #27CDDB;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
				background-color: #27CDDB;
			}
			
			.toFinish {
				background: #27CDDB!important;
			}
			
			.toCancel {
				background: red!important;
			}
			
			.mui-bar-nav {
				background: #27CDDB;
			}
			
			.mui-action-back,
			.mui-title,
			.mui-icon-reload {
				color: #FFFFFF;
			}
			
			.top10 {
				top: 10px!important;
			}
			
			.countDown {
				top: 30px!important;
			}
			
			.countDown span {
				font-size: 12px;
				color: #FF6600;
			}
		</style>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" onclick="vm.refresh()"><span class="mui-icon mui-icon-reload"></span></a>
			<h1 class="mui-title">我的交易</h1>
		</header>
		<div class="mui-content" id="aicVue" v-cloak>
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item1mobile">
						我的买单
					</a>
					<a class="mui-control-item" href="#item2mobile">
						交易中订单
					</a>
					<a class="mui-control-item" href="#item3mobile">
						已完成订单
					</a>
					<a class="mui-control-item" href="#item4mobile">
						取消订单
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="sell-lists mui-table-view-cell" v-for="(item,index) in mlist0">
										<div class="item">
											<img :src="headImg == null ? '../images/default-headImg.jpg' : headImg" style="width: 40px;height: 40px;" />
											<span class="myInfo">{{item.orderNo}}</span>
											<a class="toSell" @click="cancelBuy(item.id, index)">撤销</a>
											<dl>
												<dd class="split"><strong>￥{{item.coinPrice}}</strong>单价</dd>
												<dd class="split"><strong>{{item.coinQuantity}}</strong>数量</dd>
												<dd><strong>￥{{item.coinTotalPrice}}</strong>总金额</dd>
											</dl>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="sell-lists mui-table-view-cell" v-for="item in mlist1">
										<div class="item" @click="orderDetail(item)">
											<img :src="item.headImg == null ? '../images/default-headImg.jpg' : item.headImg" style="width: 40px;height: 40px;" />
											<span :class="['myInfo', item.countDown != null ? 'top10' : '']">{{item.orderNo}}</span>
											<span class="myInfo countDown"><span class="mui-icon-extra mui-icon-extra-outline" v-if="item.countDown != null">剩余时间 {{toCountDownTime(item.countDown)}}</span></span>
											<a class="toSell" style="width: 100px;" v-if="item.buyerMemberId == memberId && item.status == 0">待付款</a>
											<a class="toSell" style="width: 100px;" v-if="item.buyerMemberId == memberId && item.status == 1">等待卖家确认</a>
											<a class="toSell" style="width: 100px;" v-if="item.sellerMemberId == memberId && item.status == 0">等待买家付款</a>
											<a class="toSell" style="width: 100px;" v-if="item.sellerMemberId == memberId && item.status == 1">待确认</a>
											<dl>
												<dd class="split"><strong>￥{{item.coinPrice}}</strong>单价</dd>
												<dd class="split"><strong>{{item.coinQuantity}}</strong>数量</dd>
												<dd><strong>￥{{item.coinTotalPrice}}</strong>总金额</dd>
											</dl>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="sell-lists mui-table-view-cell" v-for="item in mlist2">
										<div class="item" @click="orderDetail(item)">
											<img :src="item.headImg == null ? '../images/default-headImg.jpg' : item.headImg" style="width: 40px;height: 40px;" />
											<span class="myInfo">{{item.orderNo}}</span>
											<a class="toSell toFinish">完成</a>
											<dl>
												<dd class="split"><strong>￥{{item.coinPrice}}</strong>单价</dd>
												<dd class="split"><strong>{{item.coinQuantity}}</strong>数量</dd>
												<dd><strong>￥{{item.coinTotalPrice}}</strong>总金额</dd>
											</dl>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item4mobile" class="mui-slider-item mui-control-content">
						<div id="scroll4" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="sell-lists mui-table-view-cell" v-for="item in mlist3">
										<div class="item" @click="orderDetail(item)">
											<img :src="item.headImg == null ? '../images/default-headImg.jpg' : item.headImg" style="width: 40px;height: 40px;" />
											<span class="myInfo">{{item.orderNo}}</span>
											<a class="toSell toCancel">取消</a>
											<dl>
												<dd class="split"><strong>￥{{item.coinPrice}}</strong>单价</dd>
												<dd class="split"><strong>{{item.coinQuantity}}</strong>数量</dd>
												<dd><strong>￥{{item.coinTotalPrice}}</strong>总金额</dd>
											</dl>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/public.js"></script>
		<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
		<script>
			mui.init({
				swipeBack: false
			});

			var vm = new Vue({
				el: '#aicVue',
				data: {
					mlist0: [],
					mlist1: [],
					mlist2: [],
					mlist3: [],
					memberId: null,
					headImg: null,
					page0: 1,
					page1: 1,
					page2: 1,
					page3: 1,
					tab: 0,
					loadFinish: true
				},
				mounted: function() {
					mui.plusReady(function() {
						mui('.mui-scroll-wrapper').scroll({
							scrollY: true, //是否竖向滚动
							scrollX: false, //是否横向滚动
							startX: 0, //初始化时滚动至x
							startY: 0, //初始化时滚动至y
							indicators: true, //是否显示滚动条
							bounce: false //是否启用回弹
						});

						//监听滚动条事件
						$(".mui-scroll-wrapper").scroll(function() {
							vm.scroll(this);
						});

						document.getElementById('slider').addEventListener('slide', function(e) {
							vm.tab = e.detail.slideNumber;
							if(vm["mlist" + e.detail.slideNumber].length > 0) {
								return;
							}
							vm["page" + vm.tab] = 1;
							vm.loadData();
						});
						var member = JSON.parse(plus.storage.getItem("member"));
						vm.memberId = member.id;
						vm.headImg = member.headImg;
						vm.loadData();
					});
				},
				methods: {
					refresh: function() {
						plus.nativeUI.showWaiting("正在加载", {
							width: '100px',
							height: '100px'
						});
						vm["page" + vm.tab] = 1;
						vm.loadData(function(result) {
							setTimeout(function() {
								plus.nativeUI.closeWaiting();
							}, 500);
							$("#scroll" + (vm.tab + 1)).scroll(function() {
								vm.scroll(this);
							});
						});
					},
					loadData: function(callback) {
						var Url = "";
						var data = null;
						switch(vm.tab) {
							case 0:
								Url = MyBuyOrder;
								data = {
									"page": vm.page0
								}
								break;
							case 1:
								Url = GetTransingOrders;
								data = {
									"page": vm.page1
								}
								break;
							case 2:
								Url = MyFinishOrders;
								data = {
									"page": vm.page2
								}
								break;
							case 3:
								Url = MyCancelOrders;
								data = {
									"page": vm.page3
								}
								break;
						}
						mConsole.log("page:" + data.page);
						mui.postParam(Url, data, function(result) {
							mConsole.log("我的列表" + vm.tab + ":" + JSON.stringify(result));
							if(result.code == 0) {
								if(vm.tab == 0) {
									if(vm.page0 == 1) {
										vm.mlist0 = result.page.list;
									} else {
										vm.mlist0 = vm.mlist0.concat(result.page.list);
									}
									vm.page0 = result.page.currPage + 1;
								} else if(vm.tab == 1) {
									if(vm.page1 == 1) {
										vm.mlist1 = result.page.list;
									} else {
										vm.mlist1 = vm.mlist1.concat(result.page.list);
									}
									vm.page1 = result.page.currPage + 1;

									//计算倒计时
									vm.computCountDown();
								} else if(vm.tab == 2) {
									if(vm.page2 == 1) {
										vm.mlist2 = result.page.list;
									} else {
										vm.mlist2 = vm.mlist2.concat(result.page.list);
									}
									vm.page2 = result.page.currPage + 1;
								} else if(vm.tab == 3) {
									if(vm.page3 == 1) {
										vm.mlist3 = result.page.list;
									} else {
										vm.mlist3 = vm.mlist3.concat(result.page.list);
									}
									vm.page3 = result.page.currPage + 1;
								}
							} else {
								mymui(result.msg);
							}
							if(undefined != callback) {
								callback(result);
							}
						});

					},
					scroll: function($this) {
						var tableview = $($this).children(".mui-scroll").children(".mui-table-view");
						var self = $this;
						var height = $(window).height();
						var tHeight = tableview.height();
						var tTop = tableview.offset().top;
						if(vm.loadFinish && (height - tHeight == tTop)) {
							vm.loadFinish = false;
							plus.nativeUI.showWaiting("正在加载", {
								width: '100px',
								height: '100px'
							});
							mConsole.log("到底了");
							vm.loadData(function(result) {
								setTimeout(function() {
									plus.nativeUI.closeWaiting();
								}, 500);
								if(result.code == 0) {
									if(result.page.currPage >= result.page.totalPage) {
										$(self).unbind('scroll');
										mymui("没有更多数据了")
									}
									vm.loadFinish = true;
								}
							});
						}

					},
					cancelBuy: function(id, index) {
						mui.confirm('确认撤销买单?', '撤销订单', ['取消', '确认'], function(e) {
							if(e.index == 1) {
								mui.postParam(CancelBuy, {
									id: id
								}, function(result) {
									if(result.code == 0) {
										vm.showConfirm = false;
										mymui("撤销成功");
									} else {
										mymui(result.msg);
									}
								});
							}
						});
					},
					orderDetail: function(mdata) {
						var transState = null;
						var status = null;
						switch(mdata.status) {
							case 0:
								if(vm.memberId == mdata.buyerMemberId) { //买家登录
									status = "待付款";
									transState = 1;
								} else {
									status = "等待买家付款"; //卖家登陆
									transState = 3;
								}
								break;
							case 1:
								if(vm.memberId == mdata.buyerMemberId) {
									status = "等待卖家确认";
									transState = 2;
								} else {
									status = "待确认";
									transState = 4;
								}
								break;
							case 2:
								status = "交易完成";
								transState = 8;
								break;
							case 3:
								status = "取消";
								transState = 0;
								break;
						}

						mui.openWindow({
							id: 'order_detail',
							url: '../jiaoyi/transing-order-detail.html',
							extras: {
								mid: mdata.id,
								mtranstate: transState,
								mstatus: status
							}
						});
					},
					toCountDownTime: function(mills) {
						if(mills <= 0) {
							return;
						}
						var hour = 0;
						var min = 0;
						var sec = 0;
						var hour = Math.floor(mills / (1000 * 60 * 60));
						mills = mills - (hour * (1000 * 60 * 60));
						var min = Math.floor(mills / (1000 * 60));
						mills = mills - (min * (1000 * 60));
						var sec = Math.floor(mills / 1000);
						var countDownTime = null;
						if(sec < 10) {
							countDownTime = ":0" + sec;
						} else {
							countDownTime = ":" + sec;
						}
						if(min < 10) {
							countDownTime = "0" + min + countDownTime;
						} else {
							countDownTime = min + countDownTime;
						}
						if(hour > 0) {
							countDownTime = hour + ":" + countDownTime;
						}
						return countDownTime;
					},
					computCountDown: function() {
						if(!vm.mlist1 || vm.mlist1.length == 0) {
							return;
						}
						for(var i = vm.mlist1.length - 1; i >= 0; i--) {
							var item = vm.mlist1[i];
							if(item.countDown) {
								item.countDown -= 1000;
								if(item.countDown <= 0) {
									//删除元素
									vm.mlist1.splice(i, 1);
								}
							}
						}
						//清空已存在的timer
						if(timer) {
							window.clearTimeout(timer);
						}
						timer = setTimeout(vm.computCountDown, 1000);
					}
				}
			});

			var timer = null;
			
		//确认后删除数据
		window.addEventListener("confirm", function(event) {
			for(var i = vm.mlist1.length - 1; i >= 0; i--) {
				var item = vm.mlist1[i];
				if(item.id == event.detail.id) {
					//删除元素
					vm.mlist1.splice(i, 1);
					break;
				}
			}
		});
		</script>

	</body>

</html>